<template>
    <view class="ping_alert" v-if="detailInfo">
        <div class="ping_div">
            <div class="title">参与拼团
                <text class="icon icon-font-basic icon-b-off-1" @click="closePingAlert"></text>
            </div>
            <div class="scorll">
                <!-- <div class="address" @click="chooseAddress()">
                    {{ addressText }}
                    <text class="icon icon-font-basic icon-b-arrow-1-2"></text>
                </div> -->
                <div class="info">
                    <pub-image class="img" :src="detailInfo.coverImg" />
                    <div class="text">
                        <div class="name">{{ detailInfo.goodsName }}</div>
                        <div class="gxz" v-if="detailInfo.contribution">
                            <span class="span_1">贡献值奖励</span>
                            <span class="span_2">{{ detailInfo.contribution }}</span>
                        </div>
                        <div class="jifen" v-if="detailInfo.integral">积分奖励：
                            <span class="span">{{ detailInfo.integral }}</span>
                        </div>
                        <div class="price">
                            <span class="span_1">拼团价</span>
                            <span class="span_2">￥</span>
                            <span class="span_3">{{ detailInfo.sellPrice }}</span>
                            <span class="span_4">￥{{ detailInfo.price }}</span>
                        </div>
                        <div class="nums">
                            <text class="sub icon-font-basic icon-b-as-10" @click="buyNumClick('sub')"></text>
                            <div class="txt">{{ buyNum }}</div>
                            <text class="add icon-font-basic icon-b-as-9" @click="buyNumClick('add')"></text>
                        </div>
                    </div>
                </div>
                <div class="other">
                    <div class="otitle">介绍</div>
                    <div class="text">{{ detailInfo.content }}</div>
                </div>
                <div class="other">
                    <div class="otitle">详情图</div>
                    <pub-image v-for="(li,key) in detailInfo.goodsDetailList" class="img" :src="li" :key="key"
                        mode="widthFix" />
                </div>
            </div>
            <div class="pub_btn" @click="surePing">确认拼团</div>
        </div>
    </view>
</template>

<script>
export default {
    props: {
        id: {
            type: String,
            default: '',
        }
    },
    data() {
        return {
            addressInfo: '',
            detailInfo: '',
            buyNum: 1
        };
    },
    computed: {
        addressText() {
            if (this.addressInfo) {
                return `${this.addressInfo.receiver}，${this.addressInfo.phone}，${this.addressInfo.area}${this.addressInfo.address}`
            } else {
                return '请选择地址'
            }
        }
    },
    mounted() {
        if (this.id) {
            this.getDetailInfo();
            // const that = this;
            // uni.$on('chooseAddressBack', function (data) {
            //     // console.log(data);
            //     that.addressInfo = data;
            // })
        }
    },
    methods: {
        async getDetailInfo() {
            this.$comFun.openLoading();
            const res = await this.$request.get('goods/getGoodsInfo', {
                id: this.id
            });
            this.$comFun.closeLoading();
            // console.log(res);
            if (res.code == 200) {
                const detailInfo = {
                    ...res.result,
                    goodsDetailList: res.result.goodsDetail.split(",")
                }
                this.detailInfo = detailInfo;
            }
        },
        chooseAddress() {
            this.$comFun.openWin('/pages/other/address', {
                openType: 2
            })
        },
        buyNumClick(type) {
            if (type == 'sub') {
                if (this.buyNum > 1) {
                    this.buyNum--;
                }
            } else if (type == 'add') {
                if (this.buyNum < this.detailInfo.stock) {
                    this.buyNum++;
                }
            }
        },
        closePingAlert() {
            this.$emit('closePingAlert');
        },
        async surePing() {
            this.$comFun.openWin('/pages/index/good_order',{
                goodInfo: JSON.stringify(this.detailInfo),
                orderType: this.$constant.orderType.pingGood,
                buyNum: this.buyNum,
            })
            this.closePingAlert()
            return
            
        }
    },
};
</script>

<style lang="scss" scoped>
.ping_alert {
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 1000;

    .ping_div {
        width: 100%;
        background-image: linear-gradient(#FFDADA, #fff 20%);
        position: absolute;
        bottom: 0;
        left: 0;
        padding: 0 0 90rpx 0;

        .scorll {
            max-height: 70vh;
            overflow-y: scroll;
        }

        .title {
            width: 100%;
            padding: 40rpx 0 30rpx 0;
            text-align: center;
            position: relative;
            font-size: 32rpx;
            color: #3D3D3D;
            font-weight: bold;

            .icon {
                position: absolute;
                right: 32rpx;
                top: 48rpx;
                font-size: 24rpx;
            }
        }

        .address {
            color: #000;
            font-size: 28rpx;
            padding: 5rpx 64rpx;
            background: url("@/static/bimg/img_27.png") left 20rpx center no-repeat;
            background-size: 32rpx;
            position: relative;
            line-height: 30rpx;

            .icon {
                position: absolute;
                right: 32rpx;
                top: 50%;
                margin-top: -16rpx;
                font-size: 24rpx;
            }
        }

        .info {
            width: 100%;
            // margin: 24rpx 0 0 0;
            display: flex;
            padding: 24rpx 32rpx;

            .img {
                width: 216rpx;
                height: 222rpx;
                border-radius: 8rpx;
                margin-right: 50rpx;
                overflow: hidden;
            }


            .text {
                width: calc(100% - 216rpx - 50rpx);
                display: flex;
                flex-wrap: wrap;
                align-content: flex-start;

                .name {
                    width: 100%;
                    line-height: 40rpx;
                    color: #3D3D3D;
                    font-size: 32rpx;
                    font-weight: bold;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    margin: 10rpx 0;
                }

                .gxz {
                    width: 100%;
                    height: 40rpx;
                    line-height: 40rpx;
                    color: #FF6A00;
                    font-size: 26rpx;
                    padding: 0 0 0 28rpx;
                    background: url("@/static/bimg/img_25.png") left center no-repeat;
                    background-size: 24rpx;
                    margin: 0 0 10rpx 0;

                    .span_2 {
                        font-weight: 700;
                        margin-left: 8rpx;
                    }
                }

                .jifen {
                    height: 44rpx;
                    background-color: rgba(218, 56, 56, 0.10);
                    font-size: 20rpx;
                    border-radius: 8rpx;
                    color: #DA3838;
                    line-height: 44rpx;
                    padding: 0 8rpx;

                    .span {
                        font-weight: 700;
                        font-size: 24rpx;
                    }
                }

                .price {
                    width: 100%;
                    height: 48rpx;
                    line-height: 48rpx;
                    display: flex;
                    align-items: baseline;
                    color: #E62017;
                    font-size: 24rpx;
                    margin-top: 14rpx;

                    .span_1 {
                        height: 30rpx;
                        line-height: 30rpx;
                        margin-right: 8rpx;
                    }

                    .span_2 {
                        height: 30rpx;
                        line-height: 30rpx;
                    }

                    .span_3 {
                        font-weight: 700;
                        font-size: 44rpx;
                    }

                    .span_4 {
                        font-size: 24rpx;
                        color: rgba(51, 51, 51, 0.45);
                        text-decoration: line-through;
                        margin-left: 16rpx;
                    }
                }

                .nums {
                    width: 100%;
                    display: flex;
                    margin-top: 20rpx;

                    .txt {
                        padding: 0 20rpx;
                        line-height: 32rpx;
                        height: 32rpx;
                        font-size: 28rpx;
                        color: #3D3D3D;
                    }

                    .sub {
                        font-size: 32rpx;
                        color: #ccc;
                    }

                    .add {
                        font-size: 32rpx;
                        color: #3D3D3D;
                    }
                }
            }
        }

        .other {
            padding: 24rpx 32rpx 0 32rpx;
            border-top: 2rpx solid rgba(208, 209, 211, 0.5);

            .otitle {
                font-size: 24rpx;
                color: #3D3D3D;
                line-height: 34rpx;
                margin-bottom: 24rpx;
            }

            .text {
                font-size: 24rpx;
                color: #3D3D3D;
                line-height: 34rpx;
                margin-bottom: 24rpx;
            }

            .img {
                width: 100%;
                margin-bottom: 24rpx;
            }
        }

        .pub_btn {
            position: absolute;
            bottom: 0;
            left: 0;
            border-bottom-left-radius: unset;
            border-bottom-right-radius: unset;
        }
    }
}
</style>
